<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片详情页面</title>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="ele-2.15.7/index.js"></script>
</head>
<body>

<style>

    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 100%;
        height: 200px;
        margin: auto;
        margin-top:30px ;
    }





    .btn-add{
        font-size: 14px;
        float: right;
    }

    /*.pagerstyle{*/
    /*    margin-left: 1247px;*/
    /*}*/

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    li {
        float: left;
        list-style-type: none;
    }
    .image{
        width: 100%;
        display: block;
    }
    .images li {
        width: 200px;
        height: 200px;
    }
    .images li{
        margin-left: 10px;
        border: 1px solid black;
    }
    .images img{
        width: 200px;
        height: 170px;
    }
    .images{
        clear: both;
    }

</style>

<div id="app">
        <div class="hb clearfix">
            <div><h3 style="float: left;margin-top: 0px">商品图片:</h3><h3><a href="image.html" style="float: right">返回图片管理界面</a></h3></div>


                    <ul class="images">
                        <li v-for="image, index in images" ><img :src="image.images" style="border-bottom: 1px solid black">
                            <el-button type="mini" style="margin-left: 70px;height: 24px;" @click="remove(image.imageid)" >删除</el-button>
                        </li>
                    </ul>
        </div>
</div>


</body>
<script>

  var v = new Vue({
      el : "#app",
      data : {
           proid : "",
           images : [],
      },
      methods : {
          remove(imageid){
              this.$confirm('此操作将删除该图片, 是否继续?', '提示', {
                  type: 'warning'
              }).then(() => {
                  axios.get("RemoveImageServlet.s",{
                      params: {
                          imageid : imageid
                      }
                  }).then(res =>{
                      this.$message({
                          type: 'success',
                          message: res.data.msg,
                      });
                      this.queryImage(this.proid);
                  })
              }).catch( ()=> {
                  this.$message({
                      type: 'info',
                      message:"已取消删除!"
                  });
              });
          },
          queryImage(){
              axios.get("QueryImageServlet.s",{
                  params : {
                      proid : this.proid
                  }
              }).then(res=>{
                  this.images = res.data;
              })
          },
          GetURLParams(){
              this.proid = location.search.split(/d/)[1].substring(1,2);
          },

      },
      created(){
          this.GetURLParams();
          this.queryImage();
      }
  })

</script>

</html>